<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <!--      搜索组件-->
      <SearchModle dataKey="getDeviceModle" @searchFn="searchFn"></SearchModle>
      <div class="hearder-search mb-10">
        <el-button type="primary" size="small" @click="deviceVisible=true" icon="el-icon-set-up">搜索局域网内识别器
        </el-button>
        <el-button  size="small" @click="addDevice">添加测试识别器
        </el-button>
        <span class="allbook">总 {{ page.total }} 条数据</span>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                prop="id_code"
                label="识别号">
            </el-table-column>
            <el-table-column
                label="识别范围"
                width="100">
              <template slot-scope="scope">
                {{ minrssi[scope.row.scope] }}米
              </template>
            </el-table-column>
            <el-table-column
                prop="ip"
                label="IP地址">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="添加时间">
            </el-table-column>
            <el-table-column
                label="绑定区角">
              <template slot-scope="scope">
                {{ scope.row.corner ? scope.row.corner.name : '' }} <span class="clearCornerbanding"
                                                                          v-if="scope.row.corner"
                                                                          @click="UnbundlingFn(scope.$index)">【解绑】</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="classes"
                label="状态"
                width="80">
              <template slot-scope="scope">
                <span
                    :style="{'color': deviceStatus.indexOf(scope.row.id_code)!==-1?'green':'red'}">{{
                    deviceStatus.indexOf(scope.row.id_code) !== -1 ? '在线' : '离线'
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="150">
              <template slot-scope="scope">
                <el-button size="small" @click="gotoDetail(scope.row.id)">详情</el-button>
                <el-button size="small" @click="detelFn(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
      <findDevice :visible.sync="deviceVisible" @InitFn="InitFn" @updateDevice="updateDevice"></findDevice>
      <deviceDetail :visible.sync="detailVisible" :deviceId="deviceId" @InitFn="InitFn"></deviceDetail>
      <addTestDevice :visible.sync="addnewVisible" @InitFn="InitFn"></addTestDevice>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import addTestDevice from "./addTestDevice";

export default {
  components: {addTestDevice},
  data() {
    return {
      addnewVisible: false,
      deviceId: 0,
      deviceStatus: [], // 获取当前在线设备的ip
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      // qrcodeSrc:'',
      deviceVisible: false,
      detailVisible: false,
      // 搜索
      searchForm: {},
      // 距离转换
      minrssi: {
        "-127": 0,
        "-51": 0.5,
        "-60": 1,
        "-63": 2,
        "-66": 3,
        "-68": 4,
        "-70": 5,
        "-72": 6,
        "-74": 7,
        "-76": 8,
        "-78": 9,
        "-80": 10,
        "-82": 11,
        "-84": 12,
        "-86": 13,
        "-88": 14,
        "-90": 15
      }
    }
  },
  created() {
    this.deviceStatus = window.localStorage.getItem('getDeviceList') ? JSON.parse(window.localStorage.getItem('getDeviceList')) : [];
    console.log('本地在线设备ip：', this.deviceStatus)
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      // 0 待审核1审核2驳回 is_examine
      this.searchForm.p = this.page.pageindex
      this.$post(this.api.admin_facility_index, this.searchForm).then((response) => {
        if (response.code === 0) {
          let array_ = []
          for (let i in response.list.data) {
            if(response.list.data[i].code){
              let codeNumber = response.list.data[i].code.split(',')
              response.list.data[i].codeNumber = codeNumber.length
            }

            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
            let switchvalue = false
            if (response.list.data[i].status === 1) {
              switchvalue = true
            }
            response.list.data[i].switchvalue = switchvalue
            array_.push(response.list.data[i])
          }
          this.arryList = array_
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 更新当前设备状态
    updateDevice() {
      this.deviceStatus = window.localStorage.getItem('getDeviceList') ? JSON.parse(window.localStorage.getItem('getDeviceList')) : [];
      console.log('this.deviceStatus:', this.deviceStatus)
      this.InitFn()
    },
    // 搜索
    searchFn(option) {
      this.page.pageindex = 1
      this.searchForm = option
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 刷新页面
    gotoDetail(id) {
      this.deviceId = id || ''
      this.detailVisible = true;
    },
    detelFn(index) {
      let self_ = this
      this.$confirm('此组设备将永久删除，确认删除此设备组？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self_.$post(this.api.admin_facility_delete, {
          id: self_.arryList[index].id
        }).then((response) => {
          if (response.code === 0) {
            this.arryList.splice(index, 1)
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {

      })
    },
// 解绑了
    UnbundlingFn(index) {
      this.$confirm('解绑' + this.arryList[index].corner.name + '该区域的设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    async detelRespon(index) {
      let n = this;
      this.searchForm.p = this.page.pageindex
      let data = await this.$post(this.api.corner.device.Unbundling, {id: this.arryList[index].id})
      if (!data.code) {
        n.InitFn()
        n.$message.success(data.msg)
      } else {
      }
    },
    addDevice() {
      this.addnewVisible = true
    }
  },
  mounted() {
  },
}
</script>
<style scoped>
.clearCornerbanding {
  color: red;
}

.clearCornerbanding:hover {
  text-decoration: underline;
}
</style>
